﻿<!DOCTYPE HTML>
<html>
<head>
  <title>Calculateur de durée de morceaux</title>
  <meta name='Description' content='Calculateur de durée de morceaux - Tune duration calculator'>
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  <script src="https://raw.githubusercontent.com/kostia/jquery.li18n/master/jquery.li18n.min.js"></script>

<style>
h1 {
  text-align: center;
}
table {
  margin-left: auto;
  margin-right: auto;
  border: 3px black;
  font: arial, helvetica;
}
td {
  background-color: #D0D7E6;
  padding: 10px;
  text-align: center;
}
td:first-child {
  text-align: right;  
}
#duration {
  background-color: #FFA9A9;
  color: black;
  font-weight: bold;
  padding: 10px;
  text-align: center;  
}
input.text {
  width: 6em;
}
.val {
  width: 85px;
  display: inline-block;
}
.sliderv {
  width: 100%;
  text-align: center;
}

select {
   font-size: 15px;
   line-height: 1.2em;
   width: 70%;
   text-align: center;
}
input[type=range] {
   line-height: 1.2em;
   width: 90%;
}
</style>

</head>
<body>
<h1 id="title"></h1>
<table>
<tr><td id="lsignature"></td> 
    <td><select id="signature">
        <option value="4" selected>4/4</option>
        <option value="3">3/4</option>
        <option value="4">2/2</option>
        <option value="3">6/8</option>
    </select></td>
</tr>
<tr>
    <td id="ltempo"></td>
    <td>
        <input type="range" id="tempo" min="50" max="240" value="120"/>
        <div class="sliderv"><button id="ptempo" rel="tempo">-</button><span class="val" id="vtempo"></span><button id="ntempo" rel="tempo">+</button></div>
    </td>
</tr>
<tr>
    <td id="lmeasures"></td>
    <td>
        <select id="measures">
            <option value="4">4</option>
            <option value="8">8</option>
            <option value="12">12</option>
            <option value="16">16</option>
            <option value="24">24</option>
            <option value="32" selected>32</option>
            <option value="48">48</option>
            <option value="64">64</option>
       </select>
    </td>
</tr>
<tr>
    <td id="lrepeats"></td>
    <td>
        <input type="range" id="repeats" min="0" max="20" value="4"/>
        <div class="sliderv"><button id="prepeats" rel="repeats">-</button><span class="val" id="vrepeats"></span><button id="nrepeats" rel="repeats">+</button></div>
    </td>
</tr>
<tr>
    <td><span id="ladded1"></span><br><span id="ladded2"></span></td>
    <td>
        <input type="range" id="plus" min="0" max="20" value="0"/>
        <div class="sliderv"><button id="pplus" rel="plus">-</button><span class="val" id="vplus"></span><button id="nplus" rel="plus">+</button></div>
    </td>
</tr>
<tr>
    <td id="lduration"></td>
    <td id="duration"></td>
</tr>
</table>
<script>

$(document).ready(function() {

$.li18n.translations = {
    fr: {
        title: 'Calculateur de durée de morceau',
        lsignature: 'Signature:',
        ltempo: 'Tempo:',
        lmeasures: 'Mesures par grille:',
        lrepeats: 'Nombre de grilles:',
        ladded1: 'Mesures en plus',
        ladded2: '(intro, break, fin...):',
        lduration: 'Durée:',
    },
    
    en: {
        title: 'Tune duration calculator',
        lsignature: 'Time Signature:',
        ltempo: 'Tempo:',
        lmeasures: 'Number of Measures:',
        lrepeats: 'Number of Iterations:',
        ladded1: 'Added Measures',
        ladded2: '(intro, break, end...):',
        lduration: 'Duration:',
    },
};

var language = window.navigator.userLanguage || window.navigator.language;
var defaultLang = 'en';

$.li18n.currentLocale = language ? language.replace(/-.*/,"") : defaultLang;
if (!$.li18n.translations[$.li18n.currentLocale]) {
  $.li18n.currentLocale = defaultLang;
}
$.li18n.fallbackLocale = defaultLang;

$('#title').text(_t('title'));
document.title = _t('title');
$('#lsignature').text(_t('lsignature'));
$('#ltempo').text(_t('ltempo'));
$('#lmeasures').text(_t('lmeasures'));
$('#lrepeats').text(_t('lrepeats'));
$('#ladded1').text(_t('ladded1'));
$('#ladded2').text(_t('ladded2'));
$('#lduration').text(_t('lduration'));

function updateDuration() {
  var signature = parseInt($("#signature").val());
  var tempo = parseInt($.trim($("#tempo").val()));
  var measures = parseInt($.trim($("#measures").val()));
  var repeats = parseInt($.trim($("#repeats").val()));
  var plus = parseInt($.trim($("#plus").val()));
  
  var duration =  ((plus + (repeats * measures)) * signature) / tempo;
  
  var minutes = Math.floor(duration);
  var secondes = Math.floor((duration - minutes) * 60)
  var strduration = minutes + "m " + secondes + "s";
  $("#duration").text(strduration);
}

function updateSlider(slider) {
  $("#v" + slider).text($("#"+slider).val());
  updateDuration();
}
function moveSlider(slider, inc) {
  var v = parseInt($.trim($("#"+slider).val()));
  $("#"+slider).val(v+inc);
  updateSlider(slider);
}

var intervalId = -1;
function startSlide(event, inc) {
    stopSlide();
    intervalId = setInterval(function () { moveSlider(event.target.getAttribute("rel"), inc); }, 250);
}

function stopSlide() {
    if (intervalId > 0 ) {
        clearInterval(intervalId);
        intervalId = -1;
    }
}

// sliders
var index;
var arr = ["tempo","repeats","plus"];
for (index = 0; index < arr.length; ++index) {
    var item = arr[index];
    $("#p" + item).on("touchstart mousedown", function(event) {   
        startSlide(event, -1);
    }).on("touchend touchcancel mouseup", function(event) {
        stopSlide();
    }).click(function(event) {
        moveSlider(event.target.getAttribute("rel"), -1);
    });
    $("#n" + item).on("touchstart mousedown", function(event) {   
        startSlide(event, +1);
    }).on("touchend touchcancel mouseup", function() {
        stopSlide();
    }).click(function(event) {
        moveSlider(event.target.getAttribute("rel"), +1);
    });
    $("#"+item).on("input change keyup", function(event) { updateSlider(event.target.id) }); 
    updateSlider(item);
}
// others
var arr = ["signature","measures"];
for (index = 0; index < arr.length; ++index) {
    var item = arr[index];
    $("#"+item).on("input change keyup", updateDuration);
}

updateDuration();

});
</script>
</body>
</html>
